<template>
  <div class="container">
    <Navbar :title="title" left-text="返回" left-arrow @click-left="goBack" fixed placeholder></Navbar>

    <div class="clear"></div>
    <!-- <div class="h50"></div> -->
    <div class="user" :style="{ background: 'url(' + user.cover_text + ')' }">
      <div class="user-image">
        <img :src="user.avatar_text" alt="" />
      </div>
    </div>

    <div class="form">
      <van-form @submit="onSubmit">
        <van-field label-width="4rem" label-align="center" name="nickname" label="昵称" placeholder="昵称"
          v-model="user.nickname" :rules="[{ required: true, message: '请填写用户名' }]" />

        <van-field label-width="4rem" label-align="center" name="email" label="邮箱" placeholder="邮箱" readonly
          v-model="user.email" :rules="[{ required: true, message: '请填写用户邮箱' }]" />

        <van-field label-width="4rem" label-align="center" v-model="user.password" name="password" label="密码"
          placeholder="密码" />

        <van-field label-width="4rem" label-align="center" name="sex" label="性别">
          <template #input>
            <van-radio-group v-model="user.sex" direction="horizontal">
              <van-radio name="0" style="margin-left: 10px">保密</van-radio>
              <van-radio name="1" style="margin-left: 10px">男</van-radio>
              <van-radio name="2" style="margin-left: 10px">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field v-model="user.region_text" is-link readonly label-width="4em" label-align="right" name="area"
          label="地区选择" placeholder="点击选择省市区" @click="showArea = true" />
        <van-popup v-model:show="showArea" position="bottom">
          <van-area :area-list="areaList" :value="region" @confirm="onConfirm" @cancel="showArea = false" />
        </van-popup>

        <van-field v-model="user.content" rows="2" name="content" autosize label="个人简介" type="textarea" maxlength="50"
          label-width="4em" label-align="right" placeholder="请输入个人简介" show-word-limit />

        <van-field name="avatar" label="修改头像" label-width="4em" label-align="right">
          <template #input>
            <van-uploader v-model="avatar" multiple :max-count="1" />
          </template>
        </van-field>

        <van-field name="cover" label="修改背景" label-width="4em" label-align="right">
          <template #input>
            <van-uploader v-model="cover" multiple :max-count="1" />
          </template>
        </van-field>

        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            修改资料
          </van-button>
        </div>
      </van-form>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../Footer.vue";
import Navbar from "../Navbar.vue";
import { areaList } from "@vant/area-data";

export default {
  name: "Profile",
  data() {
    return {
      areaList,
      title: "修改个人资料",
      user: {},
      avatar: [
        {
          url: this.$cookies.get("ShopUser").avatar_text,
        },
      ],
      cover: [
        {
          url: this.$cookies.get("ShopUser").cover_text,
        },
      ],
      showArea: false,
    };
  },
  methods: {
    getUserInfo() {
      this.user = this.$cookies.get("ShopUser");
      // console.log(this.$cookies.get("ShopUser");
    },
    goBack() {
      this.$router.go(-1);
    },
    async onSubmit(formData) {
      if (this.user.province) formData.code = this.user.province;

      if (this.user.city) formData.code = this.user.city;

      if (this.user.district) formData.code = this.user.district;

      if (this.avatar) formData.avatar = this.avatar[0].file;

      if (this.cover) formData.cover = this.cover[0].file;

      if (this.user.id) formData.id = this.user.id;

      // console.log(formData);
      // return false
      let res = await this.$api.profile(formData);

      if (res.code === 1) {
        this.$notify({
          type: "success",
          message: res.msg,
          duration: 1500,
          onClose: () => {
            this.$cookies.set("ShopUser", res.data);
            this.$router.replace(res.url);
          },
        });
      } else {
        this.$notify({
          type: "danger",
          message: res.msg,
          duration: 1500,
          onClose: () => {
            return false;
          },
        });
      }
    },
    onConfirm(val) {
      let [province, city, district] = val;

      if (province) {
        this.user.region_text = province.name + "-";
        this.user.province = province.code;
      }
      if (city) {
        this.user.region_text += city.name + "-";
        this.user.city = city.code;
      }
      if (district) {
        this.user.region_text += district.name;
        this.user.code = district.code;
      }
      this.showArea = false;
    },
  },
  computed: {
    region() {
      let province = this.user.province;
      let city = this.user.city;
      let district = this.user.district;

      let region = "";

      if (province) {
        region = province;
      }
      if (city) {
        region = city;
      }
      if (district) {
        region = district;
      }
      return region.toString();
    },
  },
  created() {
    this.getUserInfo();
  },
  components: {
    Footer,
    Navbar,
  },
};
</script>

<style>
@import url("/assets/css/profile.css");
</style>
